let ul1 = document.querySelector(".jdzkl ul")
let ul2 = document.querySelector(".hzkl ul")
let ul3 = document.querySelector("section ul")



$('.jd').on('click',function(){
    // let flag = $('.zkl').prop('flag')
    let flag = $('.zkl').prop('flag')
    console.log(flag);
        if (flag) {
            $('.zkl').slideUp(200).prop('flag', false)
            $('.jdzkl').css('display','none')
        } else {
            $('.zkl').slideDown(200).prop('flag', true)
            $('.jdzkl').css('display','block')
            $('.hzkl').css('display','none')


            
        }
})


const xhr1 = new XMLHttpRequest()
xhr1.open("get","http://chst.vip:1234/api/getgsshop")
xhr1.onload = function(){
    if(xhr1.status === 200){
        let res = JSON.parse(xhr1.responseText)
        let res1 = res.result
        // console.log(res1)
        let lis =''

        res1.forEach(item => {
            lis +=`
            <li shopid=${item.shopId}>${item.shopName}</li>
            `
            
        })
        ul1.innerHTML = lis
    }
}
xhr1.send(null)




$('.hb').on('click',function(){
    let flag = $('.zkl').prop('flag')
    console.log(flag);
    if(flag){
        $('.zkl').slideUp(200).prop('flag',false)
        $('.hzkl').css('display','none')
    } else{
        $('.zkl').slideDown(200).prop('flag',true)
        $('.hzkl').css('display','block')
        $('.jdzkl').css('display','none')


       
    }
})


let lilis = ''
const xhr2 = new XMLHttpRequest()
xhr2.open("get","http://chst.vip:1234/api/getgsshoparea")
xhr2.onload = function(){
    if(xhr2.status === 200){
        let ress = JSON.parse(xhr2.responseText)
        // console.log(res2)
        let res2 = ress.result
        console.log(res2)

        res2.forEach(function(item){
            lilis +=`
                <li areaId=${item.areaId}>${item.areaName}</li>
                `
        })
        ul2.innerHTML = lilis
        
    }
}
xhr2.send(null)

// $('.jd').click(function(){
//     $(this).parent().parent().next().find('.jdzkl').siblings().css('display', 'none').end().css('display', 'black')
// })
// $('.hb').click(function(){
//     $(this).parent().parent().next().find('.hzkl').siblings().css('display', 'none').end().css('display', 'black')
// })
$('.jdzkl').on('click','li',function(){
    let shopid = $(this).attr('shopid')
    console.log(shopid);
$('.hzkl').on('click','li',function(){
    let areaid = $(this).attr('areaid')
    console.log(areaid);





    const xhr3 = new XMLHttpRequest()
xhr3.open("get",`http://chst.vip:1234/api/getgsproduct?shopid=${shopid}&areaid=${areaid}`)
xhr3.onload = function(){
    if(xhr3.status === 200){
        let res3 = JSON.parse(xhr3.responseText)
        // console.log(res3);
        let ress = res3.result
        console.log(ress);
        let llli=''

        ress.forEach(item=>{
            llli +=`
        <li>
            <img src="${item.productImg}" alt="">
            <div>${item.productName}</div>
            <p>${item.productPrice}</p>
        </li>
            `
        })
        ul3.innerHTML = llli
    }
}
xhr3.send(null)




})
})







